<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./EventUtil.js"></script>
</head>

<body>
    <iframe src="blank.html" name="richedit" style="height: 200px;width: 200px"></iframe>
    <!-- contenteditable 设置为true  即可编辑当前元素 -->
    <div class="editable" id="richedit_div" contenteditable="true" style="border: 1px solid #ddd">
        可编辑的div。。。
    </div>
    <div id="other_div" style="border: 1px solid sienna">
        other div ...
    </div>
</body>
<script>
    window.onload = function () {
        console.log("页面加载完成。。。");
        //将designMode设置为on 即可编辑富文本
        frames["richedit"].document.designMode = "on";
        frames["richedit"].document.execCommand("blod", false, null);
        frames["richedit"].document.execCommand("italic", false, null);
        frames["richedit"].document.execCommand("createlink", false, "www.baidu.com");
        frames["richedit"].document.execCommand("formatblock", false, "<h4>");
        
        // 是否支持此命令
        var isSupport=frames["richedit"].document.queryCommandEnabled("bold");

        // 是否已经应用了此命令
        var isBold=frames["richedit"].document.queryCommandState("bold");
        
        // 取得应用此命令的值（execCommand()的第三个参数）
        var createlink=frames["richedit"].document.queryCommandValue("createlink");

        console.log(isSupport+","+isBold+","+createlink);

        var div = document.getElementById("richedit_div");
        document.execCommand("blod", false, null);
        document.execCommand("italic", false, null);
        document.execCommand("createlink", false, "www.runoob.com");
        document.execCommand("formatblock", false, "<h1>");



    }
</script>



</html>